import React,{useEffect} from 'react';
import Login from './components/Login';
import Register from './components/Register';
import Todolist from './components/Todolist';
import PrivateRoute from './components/PrivateRoute';
import { BrowserRouter, Routes, Route,Navigate,useLocation ,useNavigate} from 'react-router-dom';
import AuthProvider from './context/AuthProvider';
const App = () => {
  const ReplaceRoute = ({ children }) => {
    const navigate = useNavigate();
    const location = useLocation();
  
    useEffect(() => {
      // 使用 replace 模式导航到当前路径，这样就不会产生历史记录
      navigate(location.pathname, { replace: true });
    }, []);
  
    return children;
  };


  return (
    <div className="App"
    style={{
      backgroundColor:'rgba(243,243,243,0.5)',
      height:'100%',
      width:'100%',
      position:'absolute',
      top:0,
      left:0
    }}>
      <BrowserRouter>
        <AuthProvider>
          <Routes>
            <Route path="/login" element={
              <ReplaceRoute>
                <Login />
              </ReplaceRoute>
            } />
            <Route path="/register" element={
              <ReplaceRoute>
                <Register />
              </ReplaceRoute>
            } />
            <Route element={<PrivateRoute />} >
              <Route path="/todo" element={<Todolist />} />
            </Route>
            <Route path="/" element={<Navigate replace to="/login" />} />
          </Routes>
        </AuthProvider>
      </BrowserRouter>
    </div>
  );
}

export default App;

/*import React, { useEffect } from 'react';
import Login from './components/Login';
import Register from './components/Register';
import Todolist from './components/Todolist';
import PrivateRoute from './components/PrivateRoute';
import { BrowserRouter, Routes, Route, Navigate, useLocation, useNavigationType } from 'react-router-dom';
import AuthProvider from './context/AuthProvider';

// 创建一个新的组件来处理路由逻辑
const AppRoutes = () => {
  const location = useLocation();
  const navigationType = useNavigationType();

  useEffect(() => {
    const previousPath = sessionStorage.getItem('currentPath');
    const currentPath = location.pathname;

    if (previousPath === '/todo' && (currentPath === '/login' || currentPath === '/register')) {
      localStorage.clear();
      window.history.replaceState(null, '', currentPath);
    }

    sessionStorage.setItem('currentPath', currentPath);
  }, [location, navigationType]);

  return (
    <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />
      <Route element={<PrivateRoute />}>
        <Route path="/todo" element={<Todolist />} />
      </Route>
      <Route path="/" element={<Navigate replace to="/login" />} />
    </Routes>
  );
};

// 主 App 组件
const App = () => {
  return (
    <div className="App" 
      style={{
        backgroundColor: 'rgba(243,243,243,0.5)',
        height: '100%',
        width: '100%',
        position: 'absolute',
        top: 0,
        left: 0
      }}
    >
      <BrowserRouter>
        <AuthProvider>
          <AppRoutes />
        </AuthProvider>
      </BrowserRouter>
    </div>
  );
};

export default App;*/
